<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		<!-- banner -->
		<view class="banner">
			<swiper  v-if="store.mainImage" class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in store.mainImage" :key="index">
					<view class="item">
						<image :src="item?item:'../../static/lazy_detail.png'" class="img" mode="aspectFill" @click="imagePreview(index,store.mainImage)"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<swiper v-else class="swiper" :autoplay="true" duration="500" :circular="true">
				<swiper-item v-for="(item,index) in posterArr" :key="index">
					<view class="item">
						<image :src="item" class="img" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 购买人轮播 -->
			<view class="purchase_banner">
				<view class="purchase_banner_box">
					<swiper :indicator-dots="false" vertical="true" circular='true' :autoplay="true" :interval="3000" :duration="1000"  @change='changeCurrentBanner'>
					 <swiper-item v-for="(item , index) in purchaseList" :key="index">
						<image :src="item.avatar" mode="aspectFill" class="img"></image>
						<view class="fot_rtext">
							{{item.nickname}}刚刚买了{{item.name}}
						</view>
					 </swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<!-- 商品 -->
		<view class="title">
			<view class="title_box">
				<view class="name">
					{{store.name}}
				</view>
				<view class="desc">
					
					<text v-for="(itemA,indexA) in store.benefitPoints" :key="indexA">
					 <text class="text_right">{{itemA}}</text>
					 <text class="text_xhx" v-if="indexA!==store.benefitPoints.length-1">|</text>
					</text>
				</view>
				<view class="priceAll">
					<view class="all_left">
						<view class="pri_new">
							<view class="new_small">
								¥
							</view>
							<view class="new_big">
								{{store.salePrice}}
							</view>
							<view class="new_small">
								
							</view>
						</view>
						<view class="pri_old">
							市场价：￥{{store.marketPrice}}
						</view>
					</view>
					<view class="all_right">
						已售：{{store.sales}}+
					</view>
					
				</view>
				<view class="member">
					<view class="member_box" @click="openPage('member',3)">
						<view class="left">
							<image
								src="https://imgs.ynz666.com/test/2025/01/08/ZmY2ODNlYTg0N2RkNDkyMGRiOWVhOWFlYTI3OGVmYjM=.png"
								mode="aspectFill" class="img"></image> 
								<view class="text_view">
										休闲吧会员额外获得<text class="fontColor">{{Math.floor(store.bonusPoints)}}积分</text>！积分能当钱花
								</view>
						</view>
						<image src="../../static/index/index_right.png" mode="aspectFill" class="right"></image>
						
						
					</view>
				</view>
			</view>
		</view>
		
		<!-- 门店 -->
		<view class="shop">
			<view class="shop_box">
				<view class="shop_title">
					<view class="left">
						适用门店
					</view>
					<!-- <view class="right">
						<view class="allShop">
							全部门店
						</view>
						<image src="../../static/index/index_right.png" mode="aspectFill" class="img"></image>
					</view> -->
				</view>
				<view class="shop_con" v-for="(item,index) in store.stores" :key="index">
					<view class="con_viewTop">
						<view class="con_left" @click="jumpShopDetail">
							<image :src="item.publicityImgs[0]" mode="aspectFill" class="img"></image>
							<view class="conAll">
								<view class="name">
									{{item.name}}
								</view>
								
								<view class="distance">
									
									距您{{item.distance}}km
								</view>
							</view>
							
						</view>
						<view class="con_right" @click="phoneClick(item.phone)">
							<image src="https://imgs.ynz666.com/test/2025/01/08/YzMzNzZmOGI2NGRhOWM0ZDM5ODU0NGVlOGVjYmE0MGE=.png" mode="aspectFill" class="img"></image>
							<view class="text">
								电话
							</view>
						</view>
					</view>
					<view class="con_viewBot" @click="openMap(item.lng,item.lat,item.address)">
						<view class="address">
							{{item.address}}
						</view>
						<view class="con_right">
							<image src="https://imgs.ynz666.com/test/2025/01/08/MzEzOTg5ZmRkNTBhOWZkZjA2MWU1ODI0OTFiNjU4NTU=.png" mode="aspectFill" class="img"></image>
							<view class="text">
								导航
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		<!-- 详情 -->
		<view class="detail">
			<view class="detail_box">
				<view class="detail_title">
					<view :class="index==navIndexOne?'item item_active':'item'" v-for="(item,index) in navOneList" :key="index"
						@click="navClickOne(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="detail_con" v-if="navIndexOne==0">
					<view class="textAll">
						<!-- <view class="top">
							·文字介绍
						</view> -->
						<view class="bot">
							 <!-- <rich-text  :nodes="store.description" style="width: 100%;"></rich-text> -->
							{{store.description}}
						</view>
					</view>
					<view class="imgAll">
						<!-- <view class="top">
							·图片介绍
						</view> -->
						<view class="bot">
							<image :src="item" mode="aspectFill" class="img" v-for="(item,index) in store.images" :key="index"></image>
						</view>
					</view>
				</view>
				<view class="detail_con" v-if="navIndexOne==1">
					<view class="textAll">
						<view class="bot">
							{{store.rules}}
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="footBtn">
			<view class="foot_box">
				<view class="left">
					<view class="item" @click="jumpShopDetail()">
						<image
							src="https://imgs.ynz666.com/test/2025/01/08/NzI1ZmVhMzgxNjU4OTU2MDY4MzA0MGFlNjhiY2IyNmU=.png"
							mode="aspectFill" class="img"></image> 
						<view class="bot">
							门店
						</view>
					</view>
					<view class="item">
						<image
							src="https://imgs.ynz666.com/test/2025/01/08/YzE5NjQ3MWMwMmZmM2M0M2NjYTY5YzYyZGYxNjVkNTQ=.png"
							mode="aspectFill" class="img"></image> 
						<view class="bot">
							分享
						</view>
						<button open-type="share" id="placard"></button>
					</view>
				</view>
				<view class="right">
					<view class="btn btn1">
						<view class="textAll" @click="openVerify()">
							<view class="view1">
								直接购买
							</view>
							<view class="view2">
								全网低价 逢贵必赔
							</view>
						</view>
						<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
					</view>
					
					<view class="btn btn2">
						<view class="textAll" @click="openVerify()">
							<view class="view1">
								会员团
							</view>
							<view class="view2">
								享团购省钱 再赚积分
							</view>
						</view>
						<button v-if="!mineInfo.mobile && mineInfo.mobile.length!==11" open-type="getPhoneNumber" @getphonenumber.stop="onGetPhoneNumber"></button>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- 标准版确认取消弹框 -->
		<!-- <view class="mask_Verify" v-if="modalVerify">
			<view class="maskFour_box">
				<view class="bj_box">
						<view class="box">
						  <view class="box_title">
						  	确认使用
						  </view>
							<view class="box_con">
								本权益需要消费你39积分，一经兑换确认积分不可退回，确定要兑换吗
							</view>
							<view class="box_font">
								<view class="btn btn1" @click="verifyLeave">
									确认离开
								</view>
								<view class="btn btn2" @click="verifyUse()">
									确认使用
								</view>
							</view>
						</view>
				</view>
			</view>
		</view> -->
		
		<!-- 标准版确认取消弹框 -->
		<view class="mask_Verify" v-if="modalVerifyTwo">
			<view class="maskFour_box">
				<view class="bj_box">
					<!-- <image
						src=""
						mode="scaleToFill" class="free_img"></image> -->
						<view class="box">
						  <view class="box_title">
						  	确认使用
						  </view>
							
							<view class="box_con" v-if="store.restrictionType==0">
								此团购商品支持无限购买，要购买吗？
							</view>
							<view class="box_con" v-if="store.restrictionType==1">
								此团购商品
								<text v-if="store.cycle==1">每天</text>
								<text v-if="store.cycle==2">每周</text>
								<text v-if="store.cycle==3">每月</text>
								<text v-if="store.cycle==4">每年</text>
								支持购买{{store.quantityLimit}}次，目前你剩余{{store.quantityLimit-store.quantity}}次，要购买吗？
							</view>
							<view class="box_con" v-if="store.restrictionType==2">
								此团购商品支持{{store.quantityLimit}}次购买，目前你剩余{{store.quantityLimit-store.quantity}}次，要购买吗？
							</view>
							<view class="box_font">
								<view class="btn btn1" @click="verifyLeave">
									我在想想
								</view>
								<view class="btn btn2" @click="jumpSubmitOrder()">
									确认购买
								</view>
							</view>
						</view>
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>

<script>
	import QQMapWX from 'lib/qqmap-wx-jssdk/qqmap-wx-jssdk.min.js';
	import Map from 'js_sdk/ms-openMap/openMap.js'
	var qqmapsdk = new QQMapWX({
		key: 'IYIBZ-3DC6U-HRYVF-2E3CJ-OSJDS-E5FDF' 
	});
	import http from '@/utils/request/http.js';
	import env from '@/env/index.js';
	import gongType from '@/utils/debounce.js'
	import loading from '../../components/loading/loading.vue';
	import {
		apiProductInfo,apiProductInfoHistory,apiStoreGroupBuy
	} from '../../apis/my.js';
	var app = getApp();
	export default {
		components: {
			loading,
		},
		data() {
			return {
				loading:true,
				inviteId:'',//用户个人id
				mineInfo:{},
				store_id: "",
				location: "",
				store: {},
				navOneList:[
					{
						name:'权益详情',
						id:0
					},
					{
						name:'购买须知',
						id:1
					}
				],
				navIndexOne:0,//切换正在 和我的
				modalVerify:false,
				currentBanner:0,
				purchaseList:[
					{
						img:'',
						name:'徐点点不滴',
					  shop:'一点点经典口味波霸奶绿大杯'
					},
					{
						img:'',
						name:'刘打打飞',
					  shop:'明星不错大大大一样'
					}
				],//购买人轮播信息
				modalVerifyTwo:false,
			}
		},
		onShareAppMessage(res) {
			let title = this.store.name
			// if(res.target.id=="placard"){
				return {
					title: title,
					imageUrl : this.store.mainImage[0],
					path: `/pageC/pointGroup/pointGroup?store_id=${this.store_id}&inviteId=${this.mineInfo.id}`
				}
			// }
		},
		onLoad(options){
			let that = this;
			let store_id = null;
			that.location = app.globalData.latitude + "," + app.globalData.longitude;
			
			
			// 正常进 小程序码进 分享进
			// app.isLogin({},function(login){
				if(options.inviteId && options.store_id){
					console.log('分享进分享进分享进',options)
					that.inviteId=options.inviteId
					// 分享进
					store_id = options.store_id;
					that.store_id = store_id;
					that.productNewId=options.new_id
					
					
					app.isLogin({userId:that.inviteId,productId:that.store_id},function(login){
						that.LoginInvite(login);
						that.getDetail(store_id, that.location);
						that.productInfoHistoryList();
						// that.storeGroupList();
						// that.QrcodeMed();
					})
					
					
				}else if(options.scene){
					console.log(options.scene,"options.scene111")
					console.log('小程序码进',options)
					// 小程序码
					let xuScene = decodeURIComponent(options.scene)
					console.log(xuScene,"xuScene")
					
					// 将查询字符串转换为对象
					const queryObject = xuScene.split('&').reduce((acc, pair) => {
					  const [key, value] = pair.split('=');
					  acc[key] = Number(value); // 如果值需要是数字类型，可以使用 Number() 转换
					  return acc;
					}, {});
					
					console.log(queryObject,"queryObject")
					// let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
					// console.log(qrSourceId,"qrSourceId")
					that.inviteId=queryObject.inviteId
					that.store_id=queryObject.store_id
					
					app.isLogin({userId:that.inviteId,productId:that.store_id},function(login){
						// that.LoginInvite(login);
						// that.getDetail(store_id, that.location);
						// that.QrcodeMed();
						
						that.LoginInvite(login);
						that.getDetail(queryObject.store_id, that.location);
						that.productInfoHistoryList();
						// that.storeGroupList();
						// that.QrcodeMed();
					})
					
					
					
					
					// app.QrcodeSource(qrSourceId).then(qrinfo=>{
					// 	store_id = qrinfo.sourceId;
					// 	that.store_id = store_id;
					// 	that.getDetail(store_id, that.location);
					// 	that.LoginInvite(login);
					// 	that.QrcodeMed();
					// })
				}else{
					console.log('正常进',options)
					// console.log(login,"loginloginlogin")
					
					store_id = options.store_id;
					that.store_id = store_id;
					
					that.productNewId=options.new_id
					
					
					app.isLogin({},function(login){
						that.getDetail(store_id, that.location);
						that.LoginInvite(login);
						that.productInfoHistoryList();
						// that.storeGroupList();
						// that.QrcodeMed();
					})
				
					
				}
			// })
			
			// 正常进 小程序码进 分享进
			// app.isLogin({},function(login){
			// 	if(options.inviteId && options.store_id){
			// 		// 分享进
			// 		that.inviteId=options.inviteId
			// 		store_id = options.store_id;
			// 		that.store_id = store_id;
			// 		that.getDetail(store_id, that.location);
			// 		that.LoginInvite(login);
			// 	}else if(options.scene){
			// 		console.log(options.scene,"options.scene111")
			// 		// 小程序码
			// 		let qrSourceId = decodeURIComponent(options.scene).split('=')[1];
			// 		console.log(qrSourceId,"qrSourceId")
			// 		app.QrcodeSource(qrSourceId).then(qrinfo=>{
			// 			store_id = qrinfo.sourceId;
			// 			that.store_id = store_id;
			// 			that.getDetail(store_id, that.location);
			// 			that.LoginInvite(login);
			// 		})
			// 	}else{
			// 		store_id = options.store_id;
			// 		that.store_id = store_id;
			// 		that.getDetail(store_id, that.location);
			// 		that.productInfoHistoryList();
			// 		that.LoginInvite(login);
					
			// 	}
			// })
			
			
			// this.purchaseList=this.purchaseList.map((item)=>{
			// 	return Object.assign({},item,{
			// 		nameNew:item.name.slice(0,1)+'***'+item.name.slice(-1),
			// 		shopNew:item.shop.slice(0,2)+'***'+item.shop.slice(-2)
			// 	})
			// })
			// console.log(arr,"aarrrrrrr")
		},
		onShow() {
			
		},
		methods: {
			// 获取团购列表
			storeGroupList(){
				let that = this;
				apiStoreGroupBuy(that.par).then(res=>{
					that.isLastPage=res.data.lastPage
					
					that.groupList=res.data.list
					// if (res.data.list.length > 0) {
					// 	that.groupList = that.par.page == 1 ? res.data.list : that.groupList.concat(res.data.list);
					// 	console.log(that.groupList, "团购列表")
					// }
				})
			},
			phoneClick(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				});
			},
			// 打开确认弹框
			openVerify(){
				 if(this.store.restrictionType==0){
					 this.jumpSubmitOrder();
				 }else{
					 this.modalVerifyTwo=true
				 }
			   
			},
			verifyLeave(){
				this.modalVerifyTwo=false
			},
			// 确认使用
			verifyUse(){
				
			},
			
			// 跳转提交订单页面
			jumpSubmitOrder(){
				uni.navigateTo({
					url: `../submitOrder/submitOrder?store_id=${this.store_id}&inviteId=${this.inviteId}`
				})
			},
			jumpShopDetail(){
				uni.navigateTo({
					url: `../shopDetail/shopDetail?store_id=${this.store.stores[0].id}`
				})
			},
			// 团购商品历史兑换消息
			productInfoHistoryList(){
				apiProductInfoHistory().then(res=>{
					// console.log(res.data.list,"团购商品历史兑换消息")
					this.purchaseList=res.data.list
				})
			},
			changeCurrentBanner(i) {
				this.currentBanner = i.detail.current;
			},
			// 确认离开
			
			// 获取商家详情
			getDetail(s_id, location) {
				var that = this
				uni.showLoading();
				const params = {
					productId:  s_id,
					productNewId:'',
					lat: location.split(',')[0],
					lng: location.split(',')[1],
				}
				console.log(params,"params")
				apiProductInfo(params).then(res=>{
					console.log(res,'商户详情')
					that.store = res.data
					// that.MapDirection();
					uni.hideLoading();
					that.loading=false
				})
				
				// app.httpRequest({
				// 	url:app.globalData.api.store.StoreDetail,
				// 	data:params,
				// }).then( res => {
				// 	console.log(res,'商户详情')
				// 	let rep = /[\.]/;
				// 	if(rep.test(res.score)){
				// 		res.score = Math.floor(res.score *100)/100;
				// 	}else {
				// 		res.score = res.score + '.0';
				// 	}
				// 	that.store = res;
				// 	that.loading=false
					
					
				// 	that.MapDirection();
				// 	uni.hideLoading();
				// }).catch(err=>{
				// 	uni.showToast({
				// 		title:err.message?err.message:'获取商家信息失败',
				// 		icon:'none',
				// 		success() {
				// 			setTimeout(function(){
				// 				uni.switchTab({
				// 					url:'/pages/index/index'
				// 				})
				// 			},2000)
				// 		}
				// 	})
				// });
			},
			// 用户地图
			MapDirection(){
				let that = this;
				qqmapsdk.direction({
					mode:'walking',
					tags:['LEAST_TIME'],
					from:{
						latitude:app.globalData.latitude,
						longitude:app.globalData.longitude
					},
					to:{
						latitude:that.store.location.split(',')[0],
						longitude:that.store.location.split(',')[1]
					},
					success(loc) {
						console.log(loc,"loc")
						that.mapDuration = loc.result.routes[0].duration;
					}
				})
			},
			// 打开地图
			openMap(lat,lng,address) { //lat 纬度 lng 经度
				Map.openMap( Number(lng),Number(lat), address, "gcj02");//wgs84
			},
			// 评论图片预览
			imagePreview(index,imgArr){
				uni.previewImage({
					urls:imgArr,
					current:imgArr[index],
				})
			},
			navClickOne(item, index){
				this.navIndexOne = index
			},
			// 接入微信客服
			WeixinServer(){
				console.log("打开客服")
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kf/' + "kfc11f5184d7762c658"
					},
					 corpId: 'ww106853c8ad050781',
				})
			},
			LoginInvite(login){
				let that = this;
				let inviteId = that.inviteId;
				that.mineInfo = login;
				if(inviteId){
					app.isLogin({id:inviteId},function(res){
						that.mineInfo = res;
					});
				}
			},
			// 手机号授权
			onGetPhoneNumber(e){
				let that = this;
				app.GetMobile(e,function(e){
					app.getUserInfo(function(lRes){
						that.mineInfo = lRes;
						that.jumpSubmitOrder();
					})
					// if(that.inviteId !==''){
					// 	app.isLogin({id:that.inviteId},function(login){
					// 		that.mineInfo = login;
					// 		that.toBooking();
					// 	});
					// }else {
					// 	app.getUserInfo(function(lRes){
					// 		that.mineInfo = lRes;
					// 		that.toBooking();
					// 	})
					// }
				});
			},
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}?joinProductId=${this.store.id}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
		},
		
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	// banner
	.banner {
		width: 100%;
		height: 544rpx;
		position: relative;
		.swiper{
			height: 544rpx;
		}
		.item{
			position:relative;
			display: block;
			width: 100%;
			height: 544rpx;
			margin: 0 auto;
			overflow: hidden;
		}
		.img {
			display: block;
			width: 100%;
			height: 100%;
		}
	  .purchase_banner{
			position: absolute;
			width: 414rpx;
			height: 48rpx;
			background: rgba(66,66,66,0.51);
			border-radius: 24rpx;
			left: 20rpx;
			bottom: 24rpx;
			.purchase_banner_box{
				padding: 0 20rpx 14rpx;
			}
			swiper {
				width: 414rpx;
				height: 48rpx;
				swiper-item {
					width: 100%;
					height: 92rpx;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					.img{
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
					}
					.fot_rtext{
						font-size: 24rpx;
						color: #FFFFFF;		
						padding-left: 14rpx;
						word-break: break-all;
						white-space: pre-wrap;
						word-wrap: break-word;
						overflow: hidden;
						display: -webkit-box;
						text-overflow: ellipsis;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						width: 312rpx;
					}
				}
			}
		}
	}
	.title{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: linear-gradient( 180deg, #FFF1F0 0%, #FFFFFF 100%);
		border-radius: 20rpx;
		border: 2rpx solid #FFFFFF;
		.title_box{
			padding: 28rpx 20rpx 22rpx;
			.name{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				word-break: break-all;
				white-space: pre-wrap;
				word-wrap: break-word;
				overflow: hidden;
				display: -webkit-box;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
			.desc{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				padding-top: 16rpx;
				.text_xhx{
					margin: 0 10rpx;
				}
			}
			.priceAll{
				display: flex;
				align-items: baseline;
				padding-top: 8rpx;
				.all_left{
					display: flex;
					align-items: baseline;
					flex: 1;
				}
				.pri_new{
					color: rgba(253, 3, 3, 1);
					display: flex;
					align-items: baseline;
					.new_small{
						font-size: 22rpx;
					}
					.new_big{
						font-size: 42rpx;
						font-weight: bold;
						padding: 0 2rpx 0 4rpx;
					}
				}
				.pri_old{
					padding-left: 10rpx;
					font-size: 22rpx;
					color: #999999;
					text-decoration-line: line-through;
				}
			  .all_right{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					padding-right: 12rpx;
				}
			}
			.member{
				margin-top: 18rpx;
				width: 100%;
				height: 80rpx;
				background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
				border-radius: 20rpx;
				border: 2rpx solid rgba(255,182,182,0.3);
				.member_box{
					padding: 0 32rpx 0 20rpx;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						align-items: center;
						.img{
							width: 96rpx;
							height: 48rpx;
						}
						.text_view{
							padding-left: 14rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 600;
							font-size: 24rpx;
							color: #310D09;
							.fontColor{
								color: rgba(255, 26, 52, 1);
							}
						}
					}
					.right{
						width: 18rpx;
						height: 26rpx;
					}
					
				}
			}
		}
	}
	.shop{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.shop_box{
			padding: 20rpx 18rpx 28rpx;
			.shop_title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #10121E;
				}
				.right{
					display: flex;
					align-items: center;
					.allShop{
						font-weight: 400;
						font-size: 24rpx;
						color: #8C8D93;
					}
					.img{
						width: 18rpx;
						height: 26rpx;
						margin-left: 12rpx;
					}
				}
			}
			.shop_con{
				margin: 12rpx 14rpx 0 16rpx;
				
				.con_viewTop{
					display: flex;
					align-items: center;
				}
				.con_left{
					display: flex;
					align-items: center;
					flex: 1;
					.img{
						width: 128rpx;
						height: 128rpx;
						border-radius: 12rpx;
					}
					.conAll{
						padding-left: 22rpx;
						flex: 1;
						.name{
							font-weight: bold;
							font-size: 26rpx;
							color: #333333;
						}
						.address{
							font-weight: 400;
							font-size: 24rpx;
							color: #797A81;
							padding: 8rpx 0 4rpx;
						}
						.distance{
							font-weight: 400;
							font-size: 24rpx;
							color: #797A81;
						}
					}
				}
				.con_right{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					.img{
						width: 50rpx;
						height: 50rpx;
					}
					.text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #797A81;
						margin-top: 2rpx;
					}
				}
				.con_viewBot{
					display: flex;
					align-items: center;
				  margin-top: 10rpx;
					.address{
						font-weight: 400;
						font-size: 24rpx;
						color: #797A81;
						padding: 8rpx 0 4rpx;
						flex: 1;
					}
					.con_right{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						.img{
							width: 50rpx;
							height: 50rpx;
						}
						.text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #797A81;
							margin-top: 2rpx;
						}
					}
				}
			}
		}
	}
	
	.detail{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-bottom: 200rpx;
		.detail_box{
			padding: 24rpx 20rpx 28rpx;
			.detail_title{
				display: flex;
				align-items: center;
				.item{
					font-family: PingFangSC, PingFang SC;
					font-size: 28rpx;
					color: #10121E;
					color: rgba(139, 141, 146, 1);
					margin-right: 20rpx;
				}
				.item_active{
					font-weight: bold;
					color: #10121E;
				}
			}
			.detail_con{
				
				.textAll{
					.top{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						padding: 14rpx 0;
					}
					.bot{
						white-space: pre-wrap;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #2F2F2F;
						line-height: 40rpx;
						padding-top: 14rpx;
					}
				}
				.imgAll{
					.top{
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #333333;
						padding: 14rpx 0;
					}
					.bot{
						width: 100%;
						display: flex;
						flex-direction: column;
						padding-top: 14rpx;
						.img{
							width: 100%;
						}
					}
				}
			}
		}
	}
	
	.footBtn{
		width: 100%;
		height: 170rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		box-shadow: 0rpx -8rpx 22rpx 0rpx #F7F7F7;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.foot_box{
			// padding: 0 32rpx 0 54rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 20rpx;
			.left{
				display: flex;
				align-items: center;
				padding-left: 50rpx;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					.img{
						width: 36rpx;
						height: 36rpx;
					}
					.bot{
						font-weight: bold;
						font-size: 20rpx;
						color: #310D09;
						padding-top: 2rpx;
					}
					button {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}
				}
				.item:nth-child(1){
					margin-right: 60rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				padding-right: 32rpx;
				.btn{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					.textAll{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}
					button{
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}
					.view2{
						font-size: 20rpx;
						font-weight: normal;
					}
				}
				.btn1{
					width: 224rpx;
					height: 84rpx;
					background: #FFFFFF;
					border-radius: 42rpx;
					border: 2rpx solid #DEDEDE;
					font-weight: bold;
					font-size: 26rpx;
					color: #181818;
					margin-right: 22rpx;
				}
				.btn2{
					width: 224rpx;
					height: 84rpx;
					background: linear-gradient( 115deg, #FFAB52 0%, #FF2125 100%);
					box-shadow: inset 0rpx 0rpx 6rpx 0rpx rgba(255,255,255,0.5);
					border-radius: 42rpx;
					border: 2rpx solid #FFAB52;
					font-weight: bold;
					font-size: 26rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	
	
}

.mask_Verify{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.65);
			
		.maskFour_box {
			width: 604rpx;
			overflow: hidden;
			position: absolute;
			top: 50%;
			transform: translateY(-60%);
			left: 50%;
			margin-left: -302rpx;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.bj_box{
				background: #fff;
				width: 604rpx;
				height: 358rpx;
				position: relative;
				.free_img {
					width: 604rpx;
					height: 358rpx;
				}
				.box{
					width: 604rpx;
					height: 358rpx;
					position: absolute;
					top: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					.box_title{
						font-family: PingFangSC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #181818;
						padding-top: 40rpx;
					}
					.box_con{
						font-weight: 400;
						font-size: 28rpx;
						color: #232323;
						line-height: 40rpx;
						margin: 20rpx 76rpx 0;
					}
					.box_font{
						margin: 44rpx 0 0;
						width: 540rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btn{
							width: 252rpx;
							height: 82rpx;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.btn1{
							background: #FFFFFF;
							border-radius: 42rpx;
							border: 2rpx solid #DEDEDE;
							font-weight: bold;
							font-size: 30rpx;
							color: #181818;
						}
						.btn2{
							background: linear-gradient( 225deg, #FE4602 0%, #FF8414 100%);
							border-radius: 42rpx;
							border: 2rpx solid #FF8414;
							font-weight: bold;
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
